<template>
  <div class="page-container">
    <!-- 设备状态概览 -->
    <el-card class="status-card">
      <div class="status-content">
        <div class="status-item" v-for="status in equipmentStatus" :key="status.label">
          <div class="status-value" :class="status.type">{{ status.value }}</div>
          <div class="status-label">{{ status.label }}</div>
        </div>
      </div>
    </el-card>

    <!-- 设备列表 -->
    <el-card class="equipment-card">
      <template #header>
        <div class="card-header">
          <span>设备列表</span>
          <div class="header-actions">
            <el-input
              v-model="searchQuery"
              placeholder="搜索设备"
              prefix-icon="Search"
              clearable
              style="width: 200px; margin-right: 16px"
            />
            <el-button type="primary" @click="handleAddEquipment">
              <el-icon><Plus /></el-icon>添加设备
            </el-button>
          </div>
        </div>
      </template>
      <el-table :data="filteredEquipmentList" style="width: 100%">
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="type" label="设备类型" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastMaintenance" label="上次维护" />
        <el-table-column prop="nextMaintenance" label="下次维护" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" link @click="handleViewDetails(row)">
                详情
              </el-button>
              <el-button type="primary" link @click="handleMaintenance(row)">
                维护
              </el-button>
              <el-button type="danger" link @click="handleDelete(row)">
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 维护记录 -->
    <el-card class="maintenance-card">
      <template #header>
        <div class="card-header">
          <span>维护记录</span>
          <el-button type="primary" link>查看全部</el-button>
        </div>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="record in maintenanceRecords"
          :key="record.id"
          :timestamp="record.time"
          :type="record.type"
        >
          <h4>{{ record.title }}</h4>
          <p>{{ record.content }}</p>
          <div class="record-footer">
            <el-tag size="small" :type="record.status === '已完成' ? 'success' : 'warning'">
              {{ record.status }}
            </el-tag>
            <span class="operator">{{ record.operator }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 添加设备对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加设备"
      width="500px"
    >
      <el-form :model="equipmentForm" label-width="100px">
        <el-form-item label="设备名称">
          <el-input v-model="equipmentForm.name" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="equipmentForm.type" placeholder="请选择设备类型">
            <el-option label="CNC" value="CNC" />
            <el-option label="机器人" value="机器人" />
            <el-option label="检测设备" value="检测设备" />
          </el-select>
        </el-form-item>
        <el-form-item label="维护周期">
          <el-input-number v-model="equipmentForm.maintenanceCycle" :min="1" :max="365" />
          <span class="unit">天</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitEquipment">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 设备状态概览
const equipmentStatus = ref([
  { label: '在线设备', value: '24/30', type: 'primary' },
  { label: '运行中', value: '18', type: 'success' },
  { label: '待机', value: '6', type: 'info' },
  { label: '故障', value: '2', type: 'danger' },
  { label: '维护中', value: '4', type: 'warning' }
])

// 设备列表
const equipmentList = ref([
  {
    id: 1,
    name: 'CNC-001',
    type: 'CNC',
    status: '运行中',
    lastMaintenance: '2024-03-15',
    nextMaintenance: '2024-04-15'
  },
  {
    id: 2,
    name: 'CNC-002',
    type: 'CNC',
    status: '待机',
    lastMaintenance: '2024-03-10',
    nextMaintenance: '2024-04-10'
  },
  {
    id: 3,
    name: 'Robot-001',
    type: '机器人',
    status: '维护中',
    lastMaintenance: '2024-03-18',
    nextMaintenance: '2024-04-18'
  }
])

// 搜索功能
const searchQuery = ref('')
const filteredEquipmentList = computed(() => {
  if (!searchQuery.value) return equipmentList.value
  const query = searchQuery.value.toLowerCase()
  return equipmentList.value.filter(equipment =>
    equipment.name.toLowerCase().includes(query) ||
    equipment.type.toLowerCase().includes(query)
  )
})

// 状态类型映射
const getStatusType = (status) => {
  const typeMap = {
    '运行中': 'success',
    '待机': 'info',
    '维护中': 'warning',
    '故障': 'danger'
  }
  return typeMap[status] || 'info'
}

// 维护记录
const maintenanceRecords = ref([
  {
    id: 1,
    time: '2024-03-20 14:30',
    title: 'CNC-001 例行维护',
    content: '更换润滑油，检查主轴精度',
    status: '已完成',
    operator: '张工',
    type: 'success'
  },
  {
    id: 2,
    time: '2024-03-20 13:15',
    title: 'Robot-001 故障维修',
    content: '修复机械臂关节异常',
    status: '进行中',
    operator: '李工',
    type: 'warning'
  },
  {
    id: 3,
    time: '2024-03-20 11:45',
    title: 'CNC-002 预防性维护',
    content: '清洁导轨，调整刀具补偿',
    status: '已完成',
    operator: '王工',
    type: 'success'
  }
])

// 添加设备对话框
const dialogVisible = ref(false)
const equipmentForm = ref({
  name: '',
  type: '',
  maintenanceCycle: 30
})

// 处理函数
const handleAddEquipment = () => {
  dialogVisible.value = true
}

const handleSubmitEquipment = () => {
  // 这里添加设备提交逻辑
  ElMessage.success('设备添加成功')
  dialogVisible.value = false
}

const handleViewDetails = (row) => {
  // 这里添加查看详情逻辑
  console.log('查看设备详情:', row)
}

const handleMaintenance = (row) => {
  // 这里添加维护逻辑
  console.log('设备维护:', row)
}

const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除设备 ${row.name} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 这里添加删除逻辑
    ElMessage.success('删除成功')
  }).catch(() => {})
}
</script>

<style lang="scss" scoped>
.status-card {
  margin-bottom: 16px;
}

.status-content {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
}

.status-item {
  text-align: center;
}

.status-value {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  
  &.primary {
    color: var(--el-color-primary);
  }
  
  &.success {
    color: var(--el-color-success);
  }
  
  &.warning {
    color: var(--el-color-warning);
  }
  
  &.danger {
    color: var(--el-color-danger);
  }
  
  &.info {
    color: var(--el-color-info);
  }
}

.status-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
}

.equipment-card,
.maintenance-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.record-footer {
  display: flex;
  align-items: center;
  margin-top: 8px;
  
  .operator {
    margin-left: 8px;
    color: var(--el-text-color-secondary);
    font-size: 12px;
  }
}

.unit {
  margin-left: 8px;
  color: var(--el-text-color-secondary);
}
</style> 